<template>
	<div>
		<div class="start" :style="{background: color}" v-if="index == 1">
			<i class="el-icon-rank fang" @click="full"></i>
			<div class="name">
				{{name}}
			</div>
			<div class="hen">
				<div :style="{color:color}">
					{{toty}}
				</div>
			</div>
			<div class="bottm">
				共1道题
			</div>
		</div>
		<div v-if="index == 2" style="height: 100vh;">
			<i class="el-icon-rank fang" @click="full"></i>
			<div class="center" style="color: #a9aab1;margin-top: 20px; font-size: 40px;margin-bottom: 30px;">
				第 1 题 （1/2）
			</div>
			<el-progress 
				:stroke-width="stroke" 
				:text-inside="true" 
				:percentage="percentage" 
				:color="customColor"></el-progress>
			<div style="width: 1200px;margin: 40px auto;">
				<el-card style="text-align: center;padding:200px 120px;font-size: 25px;">
					1.{{name}}
				</el-card>
			</div>
			<div class="center" style="margin-top: 40px;font-size: 45px; color: #627082;">
				努力思考中，快速找到正确答案，你有可能赢取1000积分
			</div>
		</div>
		<div v-if="index == 3">
			<div style="width: 100%;height: 100vh;background-color: #eef1f3;">
				<i class="el-icon-rank fang" @click="full"></i>
				<div style="width: 200px; position: absolute;right: 120px;top: 20px;" class="dis">
					<div>
						<i class="el-icon-alarm-clock" style="font-size: 35px;"></i>
						<span style="margin-left: 10px;">{{third}}s</span>
					</div>
					<div>
						<i class="el-icon-s-custom" style="font-size: 35px;color: #55aaff;"></i>
						<span style="margin-left: 10px;">{{number}}人</span>
					</div>
				</div>
				<div style="padding: 240px;font-size: 40px;" class="center">
					{{name}}
				</div>
				<div class=" xia">
					<div style="width: 50%; " v-for="(item,index) in list" :key='index'>
						<div  :class="['item'+(index + 1)]">
							<span>{{item.a}}</span>
							<span style="margin-left: 200px;">{{item.b}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="index == 4">
			<div style="width: 100%;height: 100vh;background-color: #f6f9fa;">
				<i class="el-icon-rank fang" @click="full"></i>
				
				<div style="position: absolute;left: 100px;top: 30px;">
					<span style="font-size: 60px; color: #3b9ffa;">{{answer}}</span>
					<span style="color: #cbd1dd;">秒后继续</span>
				</div>
				<div class="start_index ">
					<div class="dis start_index_bot">
						<div class="start_index_one" 
							v-for="(item,index) in dataList" 
							:key="index" :class="['it'+(index+1)]"
							:style="{height:item.a}">
								<span>{{item.integral}}</span>
						</div>
					</div>
				</div>
				<div class=" xia">
					<div style="width: 50%; " v-for="(item,index) in list" :key='index'>
						<div class="center" style="padding-right: 30px;" :class="['item'+(index + 1)]">
							<span class="aa">{{item.a}}</span>
							<span >{{item.b}}</span>
							<i v-if="item.dui == 1" class="el-icon-check dui"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- end -->
		<div v-if="index == 5">
			1516
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				color:'',
				timer:null,
				toty:4,
				name:'题目提摩太',
				fullscreen:false,
				index:1,
				percentage: 0,
				customColor: '#409eff',
				//第二步time
				partes:20,
				//看题倒计时
				third:20,
				//答案倒计时
				answer:20,
				stroke:30,
				num:0,
				//人数
				number:0,
				//答案
				list:[
					{
						a:'A',
						b:'妇女但是感觉',
						dui:0
					},
					{
						a:'B',
						b:'妇女但是感觉',
						dui:1
					},
					{
						a:'C',
						b:'妇女但是感觉',
						dui:0
					},
					{
						a:'D',
						b:'妇女但是感觉',
						dui:0
					}
				],
				//名次高度
				height:'15px',
				dataList:[
					{integral:''},
					{integral:''},
					{integral:1000,a:'300px'},
					{integral:''},
				]
			}
		},
		created() {
			this.timeCode()
			this.num = 100/this.partes
			console.log('fsfs',this.num)
		},
		methods:{
			//第四步
			/**
			 * 选择答案时的倒计时
			 * */
			answerCode(){
				this.answering()
				this.timer = setInterval(() => {
					console.log('-------',this.partes)
					if(this.answer === 0) {
						this.cleatah()
						// this.index = 5
						/**
						 * 判断是否还有下一题，
						 * 如果有就重复之前的方法
						 * 没有就退出
						 * */
						 this.$router.push({path:'/game'})
					} else {
						this.answering()
					}
				},1000)
			},
			answering(){
				this.answer--
			},
			//第三步
			thirdCode(){
				this.thirding()
				this.timer = setInterval(() => {
					console.log('-------',this.partes)
					if(this.third === 0) {
						this.cleatah()
						this.index = 4
						this.answerCode()
						this.height = '250px'
					} else {
						this.thirding()
					}
				},1000)
			},
			thirding(){
				this.third--
			},
			// 这是第二步
			partesCode(){
				//启动定时器
				this.partesing()
				this.timer = setInterval(() => {
					console.log('-------',this.partes)
					if(this.partes === 0) {
						this.cleatah()
						this.index = 3
						this.thirdCode()
					} else {
						this.partesing()
					}
				},1000)
			},
			timeCode(){
				//启动定时器
				this.loading()
				console.log('fgsdgds',this.toty)
				this.timer = setInterval(() => {
					if(this.toty === 0) {
						this.cleatah()
						this.index = 2
						this.partesCode()
					} else {
						this.loading()
					}
				},1000)
			},
			//第二步
			partesing(){
				this.partes--
				this.percentage += this.num
			},
			loading(){
				this.toty--
				if(this.toty == 3){
					this.color = '#fe8b54'
				} else if(this.toty == 2){
					this.color = '#52b5f6'
				} else if(this.toty == 1){
					this.color = '#8257dd'
				} else if(this.toty == 0){
					this.color = '#55aaff'
				}
			},
			//关闭定时器
			cleatah(){
				clearInterval(this.timer)
				this.timer = null
			},
			//放大全屏
			full(){
				let element = document.documentElement;
				if (this.fullscreen) {
					if (document.exitFullscreen) {
						document.exitFullscreen();
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen();
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen();
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen();
					}
				} else {
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.msRequestFullscreen) {
					// IE11
						element.msRequestFullscreen();
					}
				}
				this.fullscreen = !this.fullscreen;
				
			},
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.start_index_one{
		width: 100px;
		height: 15px;
		border-radius: 10px 10px 0 0;
		display: flex;
		justify-content: center;
		bottom: 0;
		text-align: center;
		span{
			margin-top: -25px;
			margin-left: -5px;
			position: absolute;
		}
	}
	.it1{
		width: 100px;
		height: 15px;
		border-radius: 10px 10px 0 0;
		background-color: #f66454;
		position:  absolute;
		left: 0;
	}
	.it2{
		width: 100px;
		height: 15px;
		border-radius: 10px 10px 0 0;
		background-color: #ffa916;
		position:  absolute;
		left: 30%;
	}
	.it3{
		width: 100px;
		height: 15px;
		border-radius: 10px 10px 0 0;
		background-color: #35a0e9;
		position:  absolute;
		right: 30%;
	}
	.it4{
		width: 100px;
		height: 15px;
		border-radius: 10px 10px 0 0;
		background-color: #0ac6a1;
		position:  absolute;
		right: 0;
	}
	
	.start_index_bot{
		
		width: 100%;
		bottom: 0;
		position:  absolute;
	}
	.start_index{
		width: 800px;
		margin: 0 auto;
		height: 400px;
		margin-top: 8%;
		position: relative;
	}
	.aa{
		position: absolute;
		left: 30px;
	}
	.dui{
		color: #56cb2b;
		margin-top: 30px;
		position: absolute;
		font-weight: 600;
		right: 30px;
	}
	.item1{
		background: #f66454;
		color: #FFFFFF;
		font-size: 35px;
		height: 100px;
		padding-left: 25px;
		line-height: 100px;
		position: relative;
	}
	.item2{
		background: #ffa916;
		color: #FFFFFF;
		font-size: 35px;
		height: 100px;
		padding-left: 25px;
		line-height: 100px;
		position: relative;
	}
	.item3{
		background: #35a0e9;
		color: #FFFFFF;
		font-size: 35px;
		height: 100px;
		padding-left: 25px;
		line-height: 100px;
	}
	.item4{
		background: #0ac6a1;
		color: #FFFFFF;
		font-size: 35px;
		height: 100px;
		padding-left: 25px;
		line-height: 100px;
		position: relative;
	}
	.xia{
		position: absolute;
		flex-wrap: wrap;
		display: flex;
		bottom: 0;
		height: 200px;
		width: 100%;
		background-color: #9ACCF4;
	}
	.fang{
		width: 60px;
		height: 60px;
		position: absolute;
		right: 10px;
		top: 40px;
		z-index: 100;
		color: #b5b6be;
		font-size: 30px;
	}
	.bottm{
		width: 600px;
		border: 5px  solid #ffffff;
		height: 300px;
		position: absolute;
		bottom: 100px;
		font-size: 45px;
		color: #FFFFFF;
		text-align: center;
		line-height: 300px;
	}
	.hen{
		position: absolute;
		top: 200px;
		height: 60px;
		width: 100%;
		background-color: #c1c1c1;
		opacity: .5;
		text-align: center;
		font-size: 45px;
	}
	.name{
		text-align: center;
		padding-top:100px ;
		color: #FFFFFF;
		font-size: 35px;
	}
	.start{
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
	}
</style>
